<html>
<head>
  <title>用户详情</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<script language="javascript" src="/static/js/jquery-3.5.1.min.js"></script>
	<script language="javascript" src="/static/js/import.js"></script>
  <style type="text/css">
		.error{
			color: red;
		}
  </style>
  <script language="javascript">
	$(function(){
		var id = window.getQueryVariable("id");
		if(id){
			$.ajax({
				url: "/user/queryDetail.do",
				type: "post",
				data:{id:id},
				success: function (user) {
					if(user){
						$.each(user,function (key,value) {
							if(key == "sex"&&value){
								$('#myForm input[name="sex"][value="'+value+'"]').attr('checked', true);
							}else if(key == "role"&&value){
								value.split(",").forEach(function (role) {
									$('#myForm input[name="role"][value="'+role+'"]').attr('checked', true);
								});
							}else{
								$('#myForm input[name="'+key+'"]').val(value);
								$('#myForm select[name="'+key+'"]').val(value);
							}
						});
						if(user.photo){
							$('#photoImg').attr('src',"/resource/static"+user.photo);
						}
					}
				}
			});
		}
		var ajaxFormOptions = {
			url: "/user/save.do",
			type: "post",
			success: function(result){
				$(".error").html("");
				if(result.error&&result.error.length>0){
					result.error.forEach(function (error) {
						$("#"+error.field).siblings(".error").html(error.defaultMessage);
					});
				}else if(result.code == 200){
					Message.success("保存成功！");
					window.parent.changeNav("userManage");
				}else {
					Message.danger(result.msg);
				}
			}
		};
		$("#photoFileInput").fileinput({
			language:'zh',
			browseLabel:"上传头像",
			browseIcon:'<i class="bi bi-upload"></i>',
			browseClass: "btn btn-warning",
			showPreview:false,//是否显示预览
			showUpload: false,//是否显示上传按钮
			showRemove: false,//显示移除按钮
			showCancel:false,//是否显示文件上传取消按钮。默认为true。只有在AJAX上传过程中，才会启用和显示
			showCaption: false,//是否显示文件标题，默认为true
			dropZoneEnabled: false//是否显示拖拽区域
		}).on('change',function () {
			var file = this.files[0];
			if (file) {
				var reader = new FileReader();
				reader.onload = function(e) {
					var imgUrl = e.target.result;
					$('#photoImg').attr('src',imgUrl);
				};
				reader.readAsDataURL(file);
				$("#myForm").ajaxForm($.extend(true,ajaxFormOptions,{processData:false,contentType:false}));
			}
		});
		$("#myForm").ajaxForm(ajaxFormOptions);
	});
  </script>
</head>
<body>
  <div class="container">	
    <h4 class="text-center my-5">用户信息</h4>
	<form id="myForm">
		<input type="hidden" name="id">
		<input type="hidden" name="photo">
		<div class="row g-3">
			<div class="col-sm-10">
				<div class="row g-3">
					<div class="col-sm-12">
						<span class="bi bi-person position-absolute fs-5 mt-2 ms-3"></span>
						<input type="text" class="form-control ps-5" id="username" name="username" autocomplete="username" placeholder="登录账号">
						<span class="error"></span>
					</div>

					<div class="col-sm-12">
						<span class="bi bi-lock position-absolute fs-5 mt-2 ms-3"></span>
						<input type="password" class="form-control ps-5" id="password" name="password" autocomplete="new-password" placeholder="密码长度为6~18位">
						<span class="error"></span>
					</div>

					<div class="col-sm-12">
						<span class="bi bi-person-lines-fill position-absolute fs-5 mt-2 ms-3"></span>
						<input type="text" class="form-control ps-5" id="name" name="name" placeholder="真实姓名">
						<span class="error"></span>
					</div>
				</div>
			</div>

			<div class="col-sm-2">
				<div class="row g-3">
					<div class="col-sm-12">
						<img style="width:100px;height:100px" id="photoImg" class="img-circle">
					</div>
					<div class="col-sm-12">
						<input type="file" class="form-control" id="photoFileInput" name="file">
					</div>
				</div>
			</div>

			<div class="col-sm-12 position-relative">
				<span class="bi bi-phone position-absolute fs-5 mt-2 ms-3"></span>
				<input type="text" class="form-control ps-5" id="phone" name="phone" placeholder="联系方式">
				<span class="error"></span>
			</div>

			<div class="col-sm-12 position-relative">
				<span class="bi bi-person-vcard position-absolute fs-5 mt-2 ms-3"></span>
				<input type="text" class="form-control ps-5" id="idCard" name="idCard" placeholder="身份证号">
				<span class="error"></span>
			</div>

			<div class="col-sm-12 position-relative">
				<span class="bi bi-calendar position-absolute fs-5 mt-2 ms-3"></span>
				<input type="date" class="form-control ps-5" id="birthday" name="birthday">
				<span class="error"></span>
			</div>

			<div class="col-sm-12 d-flex">
				<div class="form-check">
					<input id="sex1" name="sex" type="radio" class="form-check-input" value="1">
					<label class="form-check-label" for="sex1">男</label>
				</div>
				<div class="form-check ms-3">
					<input id="sex2" name="sex" type="radio" class="form-check-input" value="2">
					<label class="form-check-label" for="sex2">女</label>
				</div>
			</div>

			<div class="col-sm-12 d-flex">
				<div class="form-check">
					<input id="role1" name="role" type="checkbox" class="form-check-input" value="系统管理员">
					<label class="form-check-label" for="role1">系统管理员</label>
				</div>
				<div class="form-check ms-3">
					<input id="role2" name="role" type="checkbox" class="form-check-input" value="图书管理员">
					<label class="form-check-label" for="role2">图书管理员</label>
				</div>
				<div class="form-check ms-3">
					<input id="role3" name="role" type="checkbox" class="form-check-input" value="读者">
					<label class="form-check-label" for="role3">读者</label>
				</div>
			</div>

			<div class="col-sm-12 mb-5">
				<select class="form-select" id="status" name="status">
					<option value="1">启用</option>
					<option value="2">禁用</option>
				</select>
			</div>
		</div>
		
		<button class="w-100 btn btn-primary btn-lg mt-5" type="submit" id="saveBtn">提交</button>
	</form>
  </div>
</body>
</html>
